<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>首页_锁定</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <style>
        body {
            background-color: #fff;
        }
        .search{
            padding: 30px 17px 10px 17px !important;
            width: 100%;
        }
        .input{
          border-radius: 22px !important;
          border: 1px solid #cbcbcb !important;
          height: 25px !important;
          font-size: 13px !important;
          padding-left: 15px !important;
        }

        .search img {
            position: absolute;
            right: 28px;
            top: 33px;
            width: 20px;
        }
        .test {
            position: relative;
        }


        /*.list {
            height: 45px;
            background-color: #DAD9D9;
            font-size: 13px;
            line-height: 45px;
        }*/
        .list {
            height: 45px;
            background-color: #DAD9D9;
            font-size: 13px;
            line-height: 45px;
            display: -webkit-box;
            overflow-x: auto;
           /*适应苹果*/
           -webkit-overflow-scrolling:touch;
        }
        .list::-webkit-scrollbar {
         display: none;
        }
        .child {
            /*width: 20%;
            text-align: center;
            float: left;
            color: #858585;*/
            padding: 0px 11px;
            text-align: center;
            color: #858585;
            height: 45px;
        }

        .childact {
            color: black;
        }
        .childact::before{
          content:"";
          position: absolute;
          bottom: 1px;
          height: 2px;
          background-color: #FF722C;
          left:10px;
          right: 10px;
        }
        .line {
            width: 68px;
            height: 3px;
            background-color: #FF722C;
            position: absolute;
            top: 41px;
            right: 50%;
            margin-right: -34px;
        }

        .theme {
            height: 103px;
            background-color: #FFF1E8;
            text-align: center;
            padding: 0px 15px;
        }

        .img {
            float: left !important;
            width: 68px !important;
            height: 66px !important;
            border-radius: 50% !important;
            margin-top: 18px !important;
        }

        .content {
            padding-left: 10px;
            padding-top: 23px;
            float: left;
            width: 73%;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .image {
            width: 32px !important;
            height: 32px !important;
            position: absolute;
            top: 33px;
            right: 20px;
            z-index: 999;
        }

        .lists {
            padding: 8px 17px;
        }

        .childlist {
            width: 50%;
            float: left;
            padding: 0px 6px;
        }
        .title_set{
          font-size:15px;
          margin-top:6px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .set {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 13px;
              color: #757575;
        }
        .date{
            font-size:5px;
            position:absolute;
            bottom:2px;
            right:0px;
            font-weight: 400;
            color: #757575;
        }
    </style>
</head>

<body>
    <div id="vm">
        <div class="search">
            <input type="text" placeholder="输入搜索内容" class="input test">
            <img src="../../image/home/search.png" alt="">
        </div>
        <div class="list">
            <!-- <div class="child test childact">最新歌曲<span class="line"></span></div>
            <div class="child test">热门推荐<span></span></div>
            <div class="child test">经典歌曲<span></span></div>
            <div class="child test">华语歌曲<span></span></div>
            <div class="child test">英文歌曲<span></span></div> -->
              <div class="child test childact">最新歌曲</div>
              <div class="child test">热门推荐</div>
              <div class="child test">经典歌曲</div>
              <div class="child test">华语歌曲</div>
              <div class="child test">英文歌曲</div>
              <div class="child test">经典歌曲</div>
              <div class="child test">华语歌曲</div>
              <div class="child test">英文歌曲</div>
            <div class="aui-clearfix"></div>
        </div>
        <div class="lists">
            <div class="childlist" onclick="Openjieshao()">
                <img src="../../image/home/picture.png" alt="">
                <div class="title_set">自由-张震域</div>
                <p class="set">自由-张震域自由-张震域自由-张震域自由-张震域自由-张震域自由-张震域自由-张震域</p>
                <p style="font-size: 13px;  color: #757575;" class="test">观看次数：23次 <span class="date">2018-09-28</span> </p>
            </div>
            <div class="childlist" onclick="Openjieshao()">
                <img src="../../image/home/picture.png" alt="">
                <div class="title_set">自由-张震域</div>
                <p class="set">自由-张震域自由-张震域自由-张震域自由-张震域自由-张震域自由-张震域自由-张震域</p>
                <p style="font-size: 13px;  color: #757575;" class="test">观看次数：23次 <span class="date">2018-09-28</span> </p>
            </div>
            <div class="childlist" onclick="Openjieshao()">
                <img src="../../image/home/picture.png" alt="">
                <div class="title_set">自由-张震域</div>
                <p class="set">自由-张震域自由-张震域自由-张震域自由-张震域自由-张震域自由-张震域自由-张震域</p>
                <p style="font-size: 13px;  color: #757575;" class="test">观看次数：23次 <span class="date">2018-09-28</span> </p>
            </div>
            <div class="childlist" onclick="Openjieshao()">
                <img src="../../image/home/picture.png" alt="">
                <div class="title_set">自由-张震域</div>
                <p class="set">自由-张震域自由-张震域自由-张震域自由-张震域自由-张震域自由-张震域自由-张震域</p>
                <p style="font-size: 13px;  color: #757575;" class="test">观看次数：23次 <span class="date">2018-09-28</span> </p>
            </div>
            <div class="aui-clearfix"></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vm',
        data: {

        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }

            }
        },
        methods: {
            init: function() {
                var _this = this;
            }
        }
    })



    function Openjieshao() {
      api.openWin({
          name: 'author',
          url: '../VIP/free_video.html',
      });


    }
    $(".child").click(function() {
        var index = $(this).index();
        $(this).addClass('childact');
        $(this).siblings().removeClass('childact');
        $(this).children('span').addClass('line');
        $(this).siblings().children('span').removeClass('line');
        // $('.tabel_list').addClass('hide');
        // $('.tabel_list').eq(index).removeClass('hide');
    });
</script>

</html>
